<template>
  <basic-dialog
    width="60%"
    :title="title"
    :visible="visible"
    :showFooter="false"
    :handleClose="handleCancel"
  >
    <basic-form
      ref="formData"
      defaultExpandStatus
      isBtnBarSingleRow
      :isScalingBtn="false"
      :formColumns="formItems"
      :dataSource="formData"
      :handleSearchForm="handleQueryForm"
      @getFormData="getFormData"
    >
      <BtnRender slot="extensionActions" :render="renderBtnsBar" />
    </basic-form>
    <SkusTable
      ref="skusTable"
      showSelectCol
      showActionCol
      showPagination
      :tableHeight="480"
      :defaultMinWidth="100"
      :dataSource="TableInfo.list"
      :columns="TableInfo.columns"
      :loading="TableInfo.loading"
      :pageSizes="pageSizes"
      :pagination="pagination"
      :total="pagination.total"
      :actionRender="renderTableBtnAction"
      :selectionChange="TableInfo.setSelection"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import skusPage from '@/mixins/commodity/skusPage';
import { setAuthBtnId } from '@/utils/bizUtils';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { getListPageBtnsBar, getTableAction } from '@/utils/getBtnsRender';
export default {
  mixins: [skusPage],
  components: {
    BasicDialog,
    BasicForm,
    SkusTable,
    BtnRender,
  },
  props: {
    title: {
      type: String,
    },
    visible: {
      type: Boolean,
      default: false
    },
    formItemList: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    associateKey: {
      type: String,
      default: ''
    },
    loadData: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      formItems: this.formItemList,
      formData: getInitFormData(this.formItemList),
      TableInfo: new TableInfo({ columns: this.columns })
    }
  },
  watch: {
    visible (val) {
      val && this.getTableData()
    }
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnBars = [
        { label: '批量关联', method: this.handleBatchAssociate },
        { label: '取消', method: this.handleCancel, type: 'default' }
      ]
      return getListPageBtnsBar(h, btnBars)
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [{ label: '关联', method: this.handleAssociate }]
      return getTableAction({ h, row, actionList })
    },
    // 取消
    handleCancel () {
      this.$emit('update:visible', false)
      this.clearAllState()
    },
    // 关联
    handleAssociate (row) {
      this.$emit('getNos', row[this.associateKey] ? [row[this.associateKey]] : '')
      this.$emit('getRows', [row])
      this.handleCancel()
    },
    // 批量关联
    handleBatchAssociate () {
      if (this.TableInfo.isNullSelection()) return this.$message.warning('请勾选后再操作')
      this.$emit('getNos', this.TableInfo.selection.map(item => item[this.associateKey]).filter(item => item))
      this.$emit('getRows', this.TableInfo.selection)
      this.handleCancel()
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId('单据关联')
      const data = { formData: this.formData, paginationParams: this.paginationParams }
      const res = await this.loadData(data, this.TableInfo.setLoading)
      const [results, totalNum] = res
      this.TableInfo.setList(results)
      this.setTotalNum(totalNum)
    },
    // 清空状态
    clearAllState () {
      this.TableInfo.clearList()
      // eslint-disable-next-line no-unused-expressions
      this.$refs?.formData?.handleResetForm()
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-input--small {
  width: 100% !important;
}
</style>
